<template>
  <view class="container">
    
      <view v-for="(user, id) in followUserDataList" :key="id">
        <view @click="gotoInfo(user.id,user.username)" class="user-item">
          <u-avatar
		  :src="user.avatarSrc"
		  :size="55"
		  class="avatar"></u-avatar>
          <text class="user-name">{{ user.username }}</text>
        </view>
      </view>
     

    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>

    <view v-if="followUserDataList.length!=0&&!hasMore && !loading" class="no-more">
      <text>没有更多数据了</text>
    </view>

    <view v-if="hasMore && !loading" class="load-more">
      <text @click="loadMore()">加载更多</text>
    </view>
	
	<view v-if="followUserDataList.length==0&&!hasMore&&!loading"
		style="text-align: center;margin: 30rpx;">
		<text style="font-size: 45rpx;color: #ff6a00;">你没有关注任何人，真正的大佬不需要在意别人的目光！</text>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  followUserDataList:[],
      currentPage:0,
      pageSize: 10,
      hasMore: true,
      loading: false,
	  uid:'',
    };
  },
  computed: {
    
  },
  methods: {
	initPage(){
		this.uid=uni.getStorageSync('UID');
		this.token=uni.getStorageSync('token');
		//console.log(this.uid);
		if(this.uid!=''&&this.token!=''){
			this.load(); // 初始化加载数据
		}  
	},
    
    // 加载用户数据
    load() {
		if(this.hasMore==true){
			this.loading=true;
			this.getFollowUserIdAndUsernameList();
			
		}
		
    },
	
	getFollowUserIdAndUsernameList(){
		uni.request({
			url:this.baseUrl+'/getUserFollowing',
			method:'POST',
			data:{
				data:{
					userId:this.uid,
					currentPage:this.currentPage,
					pageSize:this.pageSize
				},
				msgType:'getUserFollowing'
			},
			header: {
				'Content-Type': 'application/json',// 如果需要以JSON格式发送数据
				'token':this.token,
				'uid':this.uid
			},
			success: (res) => {
				console.log(res.data);
				let loadArray=[{id:'',avatarSrc:'',username:''}];
				loadArray=res.data.data;
				if(loadArray.length<this.pageSize){
					this.hasMore=false;
				}
				for(let i=0;i<loadArray.length;i++){
					const set={id:loadArray[i].userId,avatarSrc:'',username:loadArray[i].username};
					this.followUserDataList.push(set);
				}
				this.currentPage+=1;
				this.getFollowUserAvatarList();
			},
			fail(err) {
				
			}
		})
		this.loading=false;
	},
	getFollowUserAvatarList(){
		console.log("getFollowUserAvatarList执行");
		console.log(this.followUserDataList.length);
		for(let i=0;i<this.followUserDataList.length;i++){
			
			if(this.followUserDataList[i].id!=''&&this.followUserDataList[i].avatarSrc==''){
				uni.request({
				        url: this.baseUrl+'/getUserAvatar',
				        method: 'POST',
				        data: {
							data:{
								userId:this.followUserDataList[i].id
							},
							msgType:'getUserAvatar'
				        },
				        header: {
							'Content-Type': 'application/json',
							'token':this.token,
							'uid':this.uid
				        },
				        success: (res) => {
							//console.log(res);
							if(res.data.code==1){
								const userAvatar=res.data.data.imgType+'base64,'+res.data.data.userAvatar;
								this.followUserDataList[i].avatarSrc=userAvatar;
							}
				        },
				        fail: (err) => {
							console.error('请求失败:', err);
				        }
				});
			}
		}
	},

    // 导航至用户信息页面
    gotoInfo(id,username) {
      console.log('goto:', id,username);
      uni.navigateTo({
              url: "/pages/personalInformation/personalInformation?uid=" + id+"&unAllowChat=true&username="+username
            });
    },
	onReachBottom() {
	    this.load();
	}
  },

  mounted() {
    this.initPage();
  },
};
</script>

<style>
.container {
  height: 100vh; /* 设置容器高度 */
}

.user-item {
  display: flex;
  align-items: center;
  padding: 12rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 18rpx;
  margin: 10rpx 30rpx;
  background-color: #ffffff;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-name {
  font-size: 40rpx;
  color: #333;
}

.loading,
.no-more,
.load-more {
  text-align: center;
  padding: 20rpx;
  color: #007aff;
}

.no-more{
	color: #999;
}

</style>

